<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<input type="text" placeholder="请输⼊你喜欢的歌曲" />
<ul>
</ul>
<script type="text/javascript">
  window.onload = function(){
//回⻋之后，input内容获取添加li,⻚⾯发⽣变化
//第⼀步：获取input标签
    let inputNode = document.querySelector('input');
    let ulNode = document.querySelector('ul');
//第⼆步：对input添加回⻋事件
    inputNode.onkeyup = function(event){
//第三步：回⻋之后做的事情
      if(event.keyCode === 13){
//1、获取内容保存
        let content = inputNode.value;//获取表单类元素的内容，拿到的都是字符串
        if(content.trim()){
//content⼀定不是空串和空⽩串
//2、创建li
          let liNode = document.createElement('li');
//3、把内容放到li内部
          liNode.innerHTML = content;
//4、把li追加给ul
          ulNode.appendChild(liNode);
          liNode.onmouseenter = function(){
            this.style.backgroundColor = 'red';
          };
          liNode.onmouseleave= function(){
            this.style.backgroundColor = 'white';
          };

          inputNode.value = '';
//找到所有的li
//
//每加⼀个歌曲，都会从头到尾把所有的li重新添加⼀次事件，效率不⾼
          let liNodes = document.querySelectorAll('li');
          for(let i = 0; i < liNodes.length; i++){
            liNodes[i].onmouseenter = function(){
              this.style.backgroundColor = 'red';
            };
            liNodes[i].onmouseleave = function(){
              this.style.backgroundColor = 'white';
            }
          }
        }else{
//content要么是空串要么是空⽩串
          alert('歌曲名字不能为空');
          inputNode.value = '';
        }
        inputNode.value = '';
      }
    }
  }
  </script>
</body>
</html>